<template>
  <div class="app-container search-list">
    <div class="header">
      <div class="head_left"><p class="title">运费方案</p><span class="desc"></span></div>
      <el-button type="primary" @click="handleAdd">添加区域方案</el-button>
    </div>
    <div v-for="(item, index) in freightList" :key="index" v-loading="loading">
      <div class="freightList">
        <h4>
          <span><el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                  <div>{{ item.name | truncate }}</div>
             </el-tooltip>
             <span class="s">(包含{{ item.countryNames | truncateName }})</span></span>
          <div style="display:flex;align-items: center">
            <el-button type="primary" size="mini" @click="handleEdit(item.id)">修改</el-button>
            <el-button size="mini" plain type="danger" @click="handleDel(item.id)">删除</el-button>
          </div>
        </h4>
        <el-table :data="item.freightDetailList" style="width: 100%;padding: 0 20px;">
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="运费" prop="freight">
            <template slot-scope="{row}">
              {{ row.freight }} {{currencyType}}
            </template>
          </el-table-column>
          <el-table-column label="计算规则" prop="ruleText">
            <template slot-scope="{row}">
              {{ generateRuleText(row.ruleType, row.minValue, row.maxValue) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <empty v-if="freightList.length === 0"/>
  </div>
</template>

<script>
import {getFreightList, deleteFreight} from '@/api/site';
import {mapGetters} from 'vuex';

export default {
    name: 'freight-list',
    data () {
        return {
            loading: false,
            freightList: []
        };
    },
    computed: {
        ...mapGetters(['siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        currencyType () {
            return this.siteInfo.currencyType;
        }
    },
    methods: {
        checkValue (value) {
            if (value === undefined || value === null || value === '' || isNaN(value)) {
                return false;
            }
            return true;
        },
        generateRuleText (ruleType, minValue, maxValue) {
            let ruleText = '';
            let prefixText = '';
            let endText = '';
            if (ruleType === 1) {
                prefixText = '价格';
                endText = this.currencyType;
            } else if (ruleType === 2) {
                prefixText = '数量';
                endText = '件';
            } else if (ruleType === 3) {
                prefixText = '重量';
                endText = 'g';
            }
            if (!this.checkValue(minValue) && !this.checkValue(maxValue)) {
                ruleText = '所有订单';
            }
            if (!this.checkValue(minValue) && this.checkValue(maxValue)) {
                ruleText = prefixText + ' 0' + '-' + maxValue + ' ' + endText;
            }
            if (this.checkValue(minValue) && !this.checkValue(maxValue)) {
                ruleText = prefixText + '>=' + minValue + ' ' + endText;
            }
            if (this.checkValue(minValue) && this.checkValue(maxValue)) {
                ruleText = prefixText + minValue + '-' + maxValue + ' ' + endText;
            }
            return ruleText;
        },
        getFreightList () {
            this.loading = true;
            getFreightList({siteId: this.siteId}).then(res => {
                this.freightList = res.data;
                this.freightList.forEach(item => {
                    item.freightDetailList.forEach(detail => {
                        let freight = detail.freight;
                        detail.freight = freight / 100;
                        if (detail.ruleType === 1) {
                            let minValue = detail.minValue;
                            let maxValue = detail.maxValue;
                            detail.minValue = minValue / 100;
                            detail.maxValue = maxValue / 100;
                        }
                    });
                    this.loading = false;
                });
            }).catch(() => {
                this.loading = false;
            });
        },
        handleAdd () {
            this.$router.push({name: 'freight-add'});
        },
        handleEdit (id) {
            this.$router.push({name: 'freight-edit', params: {id}});
        },
        handleDel (id) {
            let text = '您确定要删除该方案吗？';
            this.$confirm(text, '提示',
                {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', dangerouslyUseHTMLString: true}
            ).then(() => {
                deleteFreight(id).then(res => {
                    this.getFreightList();
                });
            }).catch(() => {
                this.$message({type: 'info', message: '已取消删除'});
            });
        }
    },
    mounted () {
        this.getFreightList();
    }
};
</script>

<style lang="scss" scoped>
.header {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .head_left {
    display: inline-flex;
    align-items: center;
    line-height: 30px;

    .title {
      color: #30354d;
      font-size: 20px;
      margin-right: 24px;
      margin-top: 10px;
      padding-left: 20px;
    }

    .desc {
      font-size: 14px;
      color: #7e849c;
    }
  }
}

.freightList {
  margin-bottom: 20px;

  h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 0 20px;
    margin: 0;
    height: 68px;

    > span {
      color: #333;
      font-size: 18px;
      display: flex;
      align-items: center;

      .s {
        margin-left: 10px;
        color: #7e849c;
        font-size: 14px;
      }
    }
  }
}
</style>
